import MobileNavItem from "./componenets/Item"
import Accordion from '@mui/material/Accordion'
import AccordionDetails from '@mui/material/AccordionDetails'
import AccordionSummary from '@mui/material/AccordionSummary'
import Typography from '@mui/material/Typography'
import Divider from '@mui/material/Divider'
import styled from '@emotion/styled'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import NoSsr from '@mui/material/NoSsr';

const StyledAccordion = styled(Accordion)(() => ({
  'color': 'white',
  boxShadow: 'none !important',
  backgroundColor: 'transparent !important',
  backdropFilter: 'none !important',
  '&.Mui-expanded': {
    margin: "unset"
  },
  '&::before': {
    display: 'none'
  }
}))

const StyledAccordionSummary = styled(AccordionSummary)(() => ({
  padding: "0 8px",
  "&.Mui-expanded": {
    minHeight: "48px"
  },
  ".MuiAccordionSummary-content.Mui-expanded": {
    margin: "unset"
  }
}))

const StyledAccordionDetails = styled(AccordionDetails)(() => ({
  padding: "0 8px"
}))

const StyledTypography = styled(Typography)(() => ({
  fontSize: "14px",
}))

const icon = (
  <NoSsr>
    <ExpandMoreIcon className="text-white" />
  </NoSsr>
)

const AboutList = [
  {
    text: "更新日志",
    link: "/about/changelog",
  },
  {
    text: "团队成员",
    link: "/about/members",
  },
  {
    text: "许可证",
    link: "/about/license",
  }
]

const MobilePopoverContent: React.FC = () => {
  return (
    <div className="w-full h-full p-2 text-sm">
      <h5 className="my-2 indent-2 text-lg">Providencraft维基百科</h5>
      <Divider className="bg-white/10 w-[96%]" style={{ margin: "12px auto" }} />
      <MobileNavItem>
        <a className="flex items-center w-full h-full" href="/wiki/preview">词条一览</a>
      </MobileNavItem>
      <MobileNavItem>
        <a className="flex items-center w-full h-full" href="/download">下载MOD</a>
      </MobileNavItem>
      <StyledAccordion>
        <StyledAccordionSummary
          expandIcon={icon}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <StyledTypography>关于本站</StyledTypography>
        </StyledAccordionSummary>
        <StyledAccordionDetails>
          {AboutList.map(({ text, link }, index) => (
            <MobileNavItem className="px-4" key={index}>
              <a className="flex items-center w-full h-full" href={link}> {text}</a>
            </MobileNavItem>
          ))}
        </StyledAccordionDetails>
      </StyledAccordion>
    </div>
  )
}

export default MobilePopoverContent